<template>
  <div class="short-detail-page">
    <div class="short-detail-container">
      <!-- 返回按钮 -->
      <div class="back-button" @click="navigateTo('/shorts')">
        <i class="i-carbon-arrow-left text-2xl"></i>
      </div>

      <!-- 视频播放器 -->
      <div class="video-wrapper">
        <video
          ref="videoPlayer"
          class="short-video"
          :src="shortDetail?.videoUrl"
          :poster="shortDetail?.poster"
          autoplay
          loop
          controls
          playsinline
        ></video>

        <!-- 互动按钮 -->
        <ShortVideoActions
          v-if="shortDetail"
          :short="shortDetail"
          :initial-status="userStatus"
          @update:status="userStatus = $event"
        />
      </div>

      <!-- 视频信息 -->
      <div class="video-info-panel">
        <el-card>
          <!-- 用户信息 -->
          <div v-if="shortDetail?.memberUser" class="user-info">
            <div class="flex items-center gap-3">
              <el-avatar
                :src="shortDetail.memberUser.avatar"
                :size="50"
                @click="navigateTo(`/shorts/user/${shortDetail.memberUser.memberUserId}`)"
                class="cursor-pointer"
              >
                {{ shortDetail.memberUser.nickName?.charAt(0) || 'U' }}
              </el-avatar>
              <div>
                <h3 class="text-lg font-semibold">{{ shortDetail.memberUser.nickName }}</h3>
                <p class="text-sm text-gray-400">{{ formatDate(shortDetail.createTime) }}</p>
              </div>
            </div>
          </div>

          <!--描述 -->
          <div class="mt-4">
            <p class="text-gray-300">{{ shortDetail?.description }}</p>
          </div>

          <!-- 统计信息 -->
          <div class="stats-row mt-4">
            <div class="stat-item">
              <i class="i-carbon-view"></i>
              <span>{{ formatCount(shortDetail?.viewCount || 0) }} 次观看</span>
            </div>
            <div class="stat-item">
              <i class="i-carbon-favorite"></i>
              <span>{{ formatCount(shortDetail?.likes || 0) }} 点赞</span>
            </div>
            <div class="stat-item">
              <i class="i-carbon-star"></i>
              <span>{{ formatCount(shortDetail?.collection || 0) }} 收藏</span>
            </div>
          </div>
        </el-card>

        <!-- 评论区 -->
        <el-card class="mt-4">
          <template #header>
            <h3 class="text-lg font-semibold">评论 ({{ shortDetail?.comments || 0 }})</h3>
          </template>

          <div class="comment-section">
            <p class="text-center text-gray-400">评论功能开发中...</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const { getShortUserStatus } = useShortActions()

// 状态
const shortDetail = ref<any>(null)
const userStatus = ref({
  isLike: false,
  isCollection: false
})
const videoPlayer = ref()

// 获取短视频详情
const fetchShortDetail = async () => {
  try {
    const id = route.params.obfuscatedId
    const data = await $fetch(`/dev-api/short/${id}`)

    if (data.code === 200) {
      shortDetail.value = data.data
    }
  } catch (error) {
    console.error('获取短视频详情失败:', error)
    // 模拟数据
    shortDetail.value = {
      shortId: 1,
      videoUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      poster: 'https://via.placeholder.com/400x600',
      description: '这是一个精彩的短视频',
      viewCount: 12345,
      likes: 567,
      collection: 89,
      comments: 23,
      createTime: new Date().toISOString(),
      memberUser: {
        memberUserId: 1,
        avatar: 'https://via.placeholder.com/100',
        nickName: '用户名'
      }
    }
  }
}

// 获取用户状态
const fetchUserStatus = async () => {
  if (shortDetail.value) {
    const status = await getShortUserStatus(shortDetail.value.shortId)
    userStatus.value = { ...status }
  }
}

// 格式化数字
const formatCount = (count: number) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + 'w'
  }
  if (count >= 1000) {
    return (count / 1000).toFixed(1) + 'k'
  }
  return count.toString()
}

// 格式化日期
const formatDate = (date: string) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN')
}

// 初始化
onMounted(async () => {
  await fetchShortDetail()
  await fetchUserStatus()
})

// SEO
useSeoMeta({
  title: shortDetail.value?.description || '短视频详情',
  description: shortDetail.value?.description || ''
})
</script>

<style scoped>
.short-detail-page {
  min-height: 100vh;
  background-color: #0f0f0f;
  padding-top: 64px;
}

.short-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-button {
  position: fixed;
  top: 80px;
  left: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.video-wrapper {
  position: relative;
  max-width: 600px;
  margin: 0 auto 20px;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
}

.short-video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}

.video-info-panel {
  max-width: 800px;
  margin: 0 auto;
}

.user-info {
  padding: 16px 0;
}

.stats-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 14px;
}

.stat-item i {
  font-size: 18px;
}

.comment-section {
  min-height: 200px;
  padding: 20px 0;
}

:deep(.el-card) {
  background-color: rgba(31, 41, 55, 0.8);
  border-color: rgba(55, 65, 81, 0.5);
}

:deep(.el-card__header) {
  background-color: rgba(55, 65, 81, 0.3);
  border-bottom-color: rgba(55, 65, 81, 0.5);
}
</style>
